<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>websocket-java-socketio</title>
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
</head>
<body>
<h1>NettySocketIo测试</h1>
<div><p id="status">等待连接。。。</p></div>
<div><p id="message">Hello，Im NettySocketIo</p></div>
<div><p id="Broadcast">Hello，Im Broadcast</p></div>
<button id="connect" onClick='connect()'/>开始连接</button>
<button id="disconnect" onClick='disconnect()'>断开连接</button>
<button id="send" onClick='send()'/>发送消息</button>
</body>

<script type="text/javascript">

    /**
     * 前端js的 socket.emit("事件名","参数数据")方法，是触发后端自定义消息事件的时候使用的,
     * 前端js的 socket.on("事件名",匿名函数(服务器向客户端发送的数据))为监听服务器端的事件
     **/
    var socket = io.connect("http://localhost:9092?mac=2");
    var firstconnect = true;

    function connect() {
        if(firstconnect) {
            // socket.on('reconnect', function(){ status_update("重新连接服务器。。。"); });
            // socket.on('reconnecting', function( nextRetry ){ status_update("Reconnecting in "
            // + nextRetry + " seconds"); });
            // socket.on('reconnect_failed', function(){ message("Reconnect Failed"); });
            // firstconnect = false;
        } else {
            socket.socket.reconnect();
        }
    }

    // 监听服务器连接事件
    socket.on('connect', function(){ status_update("连接成功了！！！"); });

    // 监听服务器关闭服务事件
    socket.on('disconnect', function(){ status_update("断开连接了！！！"); });

    // 监听服务器端发送消息事件
    socket.on('message', function(data) {
        message(data)
        // console.log("服务器发送的消息是："+data);
    });

    // 监听服务器端发送消息事件
    socket.on('messageevent', function(data) {
        message(data)
        // console.log("服务器发送的消息是："+data);
    });

    // 监听广播消息事件
    socket.on('Broadcast', function(data) {
        Broadcast(data)
        // console.log("服务器发送的消息是："+data);
    });

    // 断开连接
    function disconnect() {
        socket.disconnect();
    }

    function message(data) {
        document.getElementById('message').innerHTML = "服务器响应消息: " + data;
    }

    function Broadcast(data) {
        document.getElementById('Broadcast').innerHTML = "广播消息: " + data;
    }

    function status_update(txt){
        document.getElementById('status').innerHTML = txt;
    }

    function esc(msg){
        return msg.replace(/</g, '<').replace(/>/g, '>');
    }

    // 点击发送消息触发
    function send() {
        var msg = "你好，我是客户端！！！";
        socket.emit('messageevent', {msgContent: msg});
    }

</script>
</html>
